<template>
  <div>
    <el-card class="elcard" style="margin-bottom:20px;overflow:initial;">
      <div class="card-box">
        <div class="left-box">
          <div class="logo-box">
            <img v-if="introductionData.avatar" width="100%" height="100%" :src="introductionData.avatar" alt="" ondragstart="return false">
            <img v-else width="100%" height="100%" src="../../../../assets/img/default-user.png" alt="" ondragstart="return false">
          </div>
          <div class="user-info">
            <h2>{{name}}<span>专利数量：{{count}}</span></h2>
            <p class="info1">
              <span>当前工作机构：<i :title="introductionData.address">{{introductionData.address}}</i></span>
              <span>联系方式：<i>{{introductionData.phone}}</i></span>
            </p>
            <div class="info2">
              <span class="tit">研究领域：</span>
              <p :title="introductionData.tags_zh.join('；')" class="content">{{introductionData.tags_zh.join('；')||'暂无'}}</p>
            </div>
            <div class="info3">
              <span class="tit">专家简介：</span>
              <p v-html="introductionData.bio" class="content"></p>
            </div>
          </div>
        </div>
        <div class="radar-box">
          <div id="chartOne" style="width:100%;height:235px"></div>
          <p v-if="chartOneEmptyTxt !== ''" class="empty-txt">{{chartOneEmptyTxt}}</p>
        </div>
      </div>
    </el-card>
    <!-- 专利申请趋势 -->
    <el-card class="elcard" :body-style="{'padding-right':'0'}" style="margin-bottom:20px;">
      <div slot="header" class="clearfix">
        <span class="tit">专利申请趋势</span>
      </div>
      <div class="main-box">
        <div class="left-box">
          <span class="tit">时间段</span>
          <el-date-picker
            v-model="chartOneStart"
            size="small"
            type="year"
            placeholder="0000-00-00"
            :clearable="false"
            class="eldatepicker"
            @change="oneChartsDate('One')">
          </el-date-picker>
          <span class="split">-</span>
          <el-date-picker
            v-model="chartOneEnd"
            size="small"
            type="year"
            placeholder="0000-00-00"
            :clearable="false"
            class="eldatepicker"
            @change="oneChartsDate('One')">
          </el-date-picker>
          <div id="chartTwo" style="width:100%;height:350px"></div>
        </div>
        <div class="right-box">
          <p class="tit">{{oneListName}}年</p>
          <el-table
            :data="oneListData"
            class="eltable"
            :header-cell-style="headerCellStyle"
            style="width: 100%;height:300px">
            <el-table-column
              prop="ad"
              label="申请日"
              width="100">
            </el-table-column>
            <el-table-column
              prop="isd"
              label="公开日"
              width="100">
            </el-table-column>
            <el-table-column
              prop="title"
              label="名称">
            </el-table-column>
            <el-table-column
              prop="pn"
              label="专利号"
              width="140">
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="oneTotal"
            :page-size="oneIps"
            :current-page.sync="oneCurrentPage"
            @current-change="getOneCurrentPage"
            class="el-pagination">
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 涉及专利关系图 -->
    <el-card class="elcard" :body-style="{'padding-right':'0'}" style="margin-bottom:20px;">
      <div slot="header" class="clearfix">
        <span class="tit">涉及专利关系图</span>
      </div>
      <!-- 临时用图片替代 -->
      <div id="chartThree">
        <img src="@/assets/img/test-01.jpg" alt="" style="max-width: 100%;max-height:100%;" ondragstart="return false">
      </div>
      <!-- <div id="chartThree" style="width:100%;height:600px;"></div> -->
    </el-card>
    <!-- 科研人才足迹圈 -->
    <div class="track-box">
      <el-card class="elcard" :body-style="{'padding-right':'0'}" style="flex:.4;margin-bottom:20px;">
        <div slot="header" class="clearfix">
          <span class="tit">科研人才足迹圈</span>
        </div>
        <Maps id="mapBox" width="100%" height="360px"/>
      </el-card>
      <el-card class="elcard" style="flex:.6;margin-left:20px;margin-bottom:20px;">
        <div slot="header" class="clearfix">
          <span class="tit">工作履历分析</span>
        </div>
        <el-table
          :data="trackListData"
          class="eltable"
          :header-cell-style="headerCellStyle"
          style="width: 100%;">
          <el-table-column
            prop="time"
            label="时间段">
          </el-table-column>
          <el-table-column
            prop="ins"
            label="任职机构">
          </el-table-column>
          <el-table-column
            prop="ins2"
            label="科研产出">
            <template slot-scope="scope">
              <p class="wrap">{{scope.row.ins2}}</p>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="threeTotal"
          :page-size="threeIps"
          :current-page.sync="trackCurrentPage"
          @current-change="getTrackCurrentPage"
          class="el-pagination">
        </el-pagination>
      </el-card>
    </div>
    
    <!-- 科研成果列表 -->
    <el-card class="elcard" style="margin-bottom:20px">
      <div slot="header" class="clearfix">
        <span class="tit">科研成果列表</span>
      </div>
      <el-table
        :data="twoListData"
        class="eltable"
        :header-cell-style="headerCellStyle"
        style="width: 100%;">
        <el-table-column
          prop="pn"
          label="专利号"
          width="140">
        </el-table-column>
        <el-table-column
          prop="ttl"
          label="标题">
        </el-table-column>
        <el-table-column
          prop="apd"
          label="申请时间"
          width="140">
        </el-table-column>
        <el-table-column
          prop="an"
          label="申请人">
        </el-table-column>
        <el-table-column
          prop="ipc_kind"
          label="技术领域">
          <template slot-scope="scope">
            <span>{{scope.row.ipc_kind || '暂无'}}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        background
        layout="prev, pager, next"
        :total="twoTotal"
        :page-size="twoIps"
        :current-page.sync="twoCurrentPage"
        @current-change="getTwoCurrentPage"
        class="el-pagination">
      </el-pagination> -->
    </el-card>
    <!-- 成果转化潜力 -->
    <el-card class="elcard" style="margin-bottom:20px">
      <div slot="header" class="clearfix">
        <span class="tit">成果转化潜力</span>
      </div>
      <el-table
        :data="threeListData"
        class="eltable"
        :header-cell-style="headerCellStyle"
        style="width: 100%;">
        <el-table-column
          prop="pn"
          label="潜在合作企业">
          <template slot-scope="scope">
            <p class="names">
              {{scope.row.companys.join('；')}}
              <!-- <span v-for="(item, index) in scope.row.companys" :key="index" :title="item">{{item}}</span> -->
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="key"
          label="潜在合作内容">
        </el-table-column>
        <!-- <el-table-column
          prop="percentage"
          label="匹配程度"
          width="240">
          <template slot-scope="scope">
            <div class="percentage-box">
              <el-progress :stroke-width="10" :show-text="false" :percentage="scope.row.percentage" :color="customColors" class="progress"></el-progress>
              <p class="number">{{scope.row.percentage}}
                ({{scope.row.percentage > 80 ? '高' : 
                  scope.row.percentage > 50 ? '中' : '低'}})</p>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- <el-pagination
        background
        layout="prev, pager, next"
        :total="threeTotal"
        :page-size="threeIps"
        :current-page.sync="threeCurrentPage"
        @current-change="getThreeCurrentPage"
        class="el-pagination">
      </el-pagination> -->
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import resize from '@/utils/resize'
import Colors from '@/utils/chartsColors'
import axios from 'axios'
import Maps from './Map'
import jsonData from './mock.json'
let jwt = require('jsonwebtoken')
export default {
  mixins:[resize],
  data() {
    return {
      user: '',
      introductionData: {
        avatar: null,
        address: '',
        phone: '',
        tags_zh: [],
        bio: ''
      },
      name: this.$route.query.name || '',
      id: this.$route.query.id || '',
      count: this.$route.query.count || '',
      chartOne: null,
      chartOneEmptyTxt: '',
      // 日期选择
      startYear: '',
      endYear: '',
      // 专利申请趋势
      chartOneStart: '',
      chartOneEnd: '',
      chartTwo: '',
      chartTwo2: '',
      tabChartActive: 0,
      oneListName: '', // 专利申请趋势右侧list标题
      oneListData: [],
      valueChartOne: {
        appIsdObject: {
          list: [],
          types: []
        },
        appApdObject: {
          list: [],
          types: []
        }
      },
      splitDate: '',
      splitDate2: '',
      oneTotal: 0,
      oneIpi: 0, // 页码
      oneIps: 6, // 每页展示条数
      oneCurrentPage: 1,
      oneSeriesName: '', // 当前专利申请趋势 点击的点的名称
      oneFieldType: 'ad', // 默认为ad

      chartThree: null,
      trackListData: [],
      trackIpi: 0,
      trackIps: 6,
      trackCurrentPage: 1,

      twoListData: [], // 科研成果列表
      twoTotal: 0,
      twoIpi: 0, // 页码
      twoIps: 6, // 每页展示条数
      twoCurrentPage: 1,

      threeListData: [], // 科研成果列表
      threeTotal: 0,
      threeIpi: 0, // 页码
      threeIps: 6, // 每页展示条数
      threeCurrentPage: 1,
      customColors: [
        {color: '#f06e6e', percentage: 0},
        {color: '#efa752', percentage: 50},
        {color: '#74cec1', percentage: 80},
      ],
    }
  },
  components: {
    Maps
  },
  computed:{
    ...mapState(['levelCode','levelName'])
  },
  methods: {
    init() {
      let token = this.$cookie.get("token")
      this.user = jwt.decode(token).sub
      this.getIntroduction()
      this.chartOne = this.$echarts.init(document.getElementById('chartOne'))
      this.getChartOneData()
      let startYear = new Date().getFullYear() - 9
      let endYear = new Date().getFullYear()
      this.getTrendsData(startYear, endYear)
      this.getTwoListData()
      this.getThreeListData()
      this.getChartThreeData()
      this.getTrackListData()
    },
    // 获取人才介绍信息
    getIntroduction() {
      let params = {
        pid: this.id,
        name: this.name,
        companys: [this.$route.query.personOrAgency],
        user: this.user
      }
      if (this.$route.query.rel_org) {
        params['companys'] = JSON.parse(this.$route.query.rel_org)
      }
      // 测试params
      // params = {
      //   name: '夏俐',
      //   companys: ['清华大学自动化系'],
      //   user: this.user
      // }
      this.$post(this.$Url.production.personnelIntroductionByPid, params).then(res => {
        let data = res.data || []
        let profile = data['profile'] || {}
        this.introductionData = {
          avatar: data['avatar'] || null,
          address: profile['address'] || '暂无',
          phone: profile['phone'] || '暂无',
          tags_zh: data['tags_zh'] || [],
          bio: profile['bio'] || '暂无'
        }
      }).catch(err => {})
    },
    getChartOneData() {
      this.chartOne.showLoading({
        text: 'loading',
        color: '#0b0a2b',
        textColor: '#0b0a2b',
        maskColor: '#fff',
        zlevel: 0
      })
      this.$post(this.$Url.production.perRadar, {
        ipi: 1,
        ips: 10000,
        musts: {
          'in_id.id': this.id
        }
      }).then(res => {
        let data = res.data
        if (data) {
          // M：市场价值
          // S：社会效应
          // T：技术价值
          // Q：专利价值度
          // J：专利得分
          let value = [data['M'], data['S'], data['T'], data['Q'], data['J']]
          let seriesData = [
            {
              value : value,
              name : this.name,
            },
          ]
          this.renderChartOne(seriesData)
        } else {
          this.chartOne.hideLoading()
          this.chartOneEmptyTxt = '暂无数据'
        }
      }).catch(err => {})
      
    },
    renderChartOne(seriesData) {
      let option = {
        backgroundColor: '#fff',
        tooltip: {
          show: true
        },
        radar: {
          radius: '60%',
          splitNumber: 4,
          name: {
            color: '#86899e'
          },
          nameGap: 10,
          axisLine: {
            show: false
          },
          splitArea: {
            areaStyle: {
              color: ['transparent']
            }
          },
          indicator: [
            {name: '市场价值', max: 100},
            {name: '社会效应', max: 100},
            {name: '技术价值', max: 100},
            {name: '专利价值度', max: 100},
            {name: '专利得分', max: 100},
          ]
        },
        series: [
          {
            type: 'radar',
            symbol: 'none',
            lineStyle: {
              width: 0,
              color: 'rgba(80,77,166,0.9)'
            },
            areaStyle: {
              color: 'rgba(80,77,166,0.9)'
            },
            data: seriesData,
          }
        ]
      }
      this.chartOne.hideLoading()
      this.chartOne.setOption(option, true)
    },
    // 专利申请趋势
    trendsData(startYear, endYear, fieldType) {
      return this.$post(this.$Url.production.peoAnalysis, {
        musts: {
          'in_id.id': this.id
        },
        aggs: {
          interval: 'YEAR',
          format: 'yyyy',
          field: fieldType, // ad:申请日 isd:公开日
          type: 'date'
        },
        rangArr: [
          {
            start: `${startYear}-01-01`,
            end: `${endYear}-12-31`,
            field: fieldType
          }
        ],
      })
    },
    getTrendsData(startYear, endYear) {
      let tStartYear = startYear
      let tEndYear = endYear
      axios.all([this.trendsData(startYear, endYear, 'ad'), this.trendsData(startYear, endYear, 'isd')])
        .then(axios.spread((res1, res2) => {
          // 申请日数量
          let data1 = res1.data
          let list1 = []
          let types1 = []
          // 公开日数量
          let data2 = res2.data
          let list2 = []
          let types2 = []

          for(let i = tStartYear; i <= tEndYear; i++){
            list1.push(0)
            list2.push(0)
            types1.push(String(i))
            types2.push(String(i))
          }
          // 申请日数量
          if (data1) {
            for(let i in data1){
              this.$set(list1, types1.indexOf(data1[i].key_as_string), data1[i].doc_count)
            }
          }
          this.valueChartOne.appApdObject.list = list1
          this.valueChartOne.appApdObject.types = types1
          // 公开日数量
          if (data2) {
            for(let i in data2){
              this.$set(list2, types2.indexOf(data2[i].key_as_string), data2[i].doc_count)
            }
          }
          this.valueChartOne.appIsdObject.list = list2
          this.valueChartOne.appIsdObject.types = types2

          this.renderchartTwo()


          let startYear = this.chartOneStart === '' ? new Date().getFullYear() - 9 : new Date(this.chartOneStart).getFullYear()
          let endYear = this.chartOneEnd === '' ? new Date().getFullYear() : new Date(this.chartOneEnd).getFullYear()
          // this.queryOneList(startYear, endYear, 'ad')
          
          this.queryOneList(this.oneListName, this.oneListName, 'ad')
        }))

    },
    // 专利申请趋势-折线图
    renderchartTwo() {
      this.chartTwo = this.$echarts.init(document.getElementById("chartTwo"))
      // 专利申请趋势 起止日期、发明人专利量初始年份
      this.chartOneStart = this.chartTwoStart = this.valueChartOne.appApdObject.types[0]
      this.chartOneEnd = this.chartTwoEnd = this.valueChartOne.appApdObject.types[this.valueChartOne.appApdObject.types.length-1]
      // 默认查最早有数据的专利申请趋势
      for(let i=0;i<this.valueChartOne.appApdObject.list.length;i++){
        if(this.valueChartOne.appApdObject.list[i]>0){
          this.oneListName = this.valueChartOne.appApdObject.types[i]
          break
        }
      }
      if(this.oneListName===''){
        for(let i=0;i<this.valueChartOne.appIsdObject.list.length;i++){
          if(this.valueChartOne.appIsdObject.list[i]>0){
            this.oneListName = this.valueChartOne.appIsdObject.types[i]
            break
          }
        }
      }
      this.splitDate = (Number(this.chartOneEnd) - 1).toString() // 折线图需要虚线
      this.splitDate2 = (Number(this.chartOneEnd)).toString() // 柱状图不需要虚线
      // 实线部分，虚线部分
      let solid1=[],dotted1=[],solid2=[],dotted2=[],node1=0,node2=0
      if(this.valueChartOne.appApdObject.types.indexOf(this.splitDate)>-1){
        node1 = this.valueChartOne.appApdObject.types.indexOf(this.splitDate)
      }
      for(let i=0;i<this.valueChartOne.appApdObject.list.length;i++){
        if(i<=node1){
          solid1.push(this.valueChartOne.appApdObject.list[i])
        }else{
          solid1.push('-')
        }
        if(i>=node1){
          dotted1.push(this.valueChartOne.appApdObject.list[i])

        }else{
          dotted1.push('-')
        }
      }
      if(this.valueChartOne.appIsdObject.types.indexOf(this.splitDate)>-1){
        node2 = this.valueChartOne.appIsdObject.types.indexOf(this.splitDate)
      }
      for(let i=0;i<this.valueChartOne.appIsdObject.list.length;i++){
        if(i<=node2){
          solid2.push(this.valueChartOne.appIsdObject.list[i])
        }else{
          solid2.push('-')
        }
        if(i>=node2){
          dotted2.push(this.valueChartOne.appIsdObject.list[i])

        }else{
          dotted2.push('-')
        }
      }
      
      let optionOne = {
        tooltip: {
          confine: true,
          trigger: "axis",
          backgroundColor: "#fff",
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          borderRadius: 0,
          padding: 5,
          textStyle: {
            color: "#000"
          },
          axisPointer: { type: "none" },
          formatter: function (params, ticket, callback) {
            var htmlStr = '';
            var valMap = {};
            for(var i=0;i<params.length;i++){
              var param = params[i];
              var xName = param.name;//x轴的名称
              var seriesName = param.seriesName;//图例名称
              var value = param.value;//y轴值
              var color = param.color;//图例颜色
              //过滤无效值
              if(value == '-'){
                  continue;
              }
              //过滤重叠值
              if(valMap[seriesName] == value){
                  continue;
              }
              if(i===0){
                htmlStr += xName + '<br/>';//x轴的名称
              }
              htmlStr +='<div>';
              //为了保证和原来的效果一样，这里自己实现了一个点的效果
              htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
              //圆点后面显示的文本
              htmlStr += seriesName + '：' + value;
              htmlStr += '</div>';
              valMap[seriesName] = value;
            }
            return htmlStr;
          }
        },
        legend: {
          type: "scroll",
          data: ['申请日数量', '公开日数量'],
          bottom: 0,
          left: "5%",
          right: "5%"
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#f0f1f3"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#f0f1f3",
                width: 2
              }
            },
            axisLabel: {
              textStyle: {
                color: "#9e9e9e"
              }
            },
            data: this.valueChartOne.appIsdObject.types
          },
        ],
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#f0f1f3"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#f0f1f3",
              width: 2
            }
          },
          axisLabel: {
            textStyle: {
              color: "#9e9e9e"
            }
          }
        },
        series: [
          {
            name: '申请日数量',
            type: "line",
            data: solid1,
            smooth: true,
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: Colors.color[1]
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(" + Colors.rgb[1] + ",0.8)"
                    },
                    {
                      offset: 1,
                      color: "rgba(" + Colors.rgb[1] + ",0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            }
          },
          {
            name: '申请日数量', //虚线
            type: "line",
            data: dotted1,
            smooth: true,
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: Colors.color[1],
                lineStyle:{
                  type:'dotted'  //'dotted'虚线 'solid'实线
                }
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(" + Colors.rgb[1] + ",0.8)"
                    },
                    {
                      offset: 1,
                      color: "rgba(" + Colors.rgb[1] + ",0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            }
          },
          {
            name: '公开日数量',
            type: "line",
            data: solid2,
            smooth: true,
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: Colors.color[4]
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(" + Colors.rgb[4] + ",0.8)"
                    },
                    {
                      offset: 1,
                      color: "rgba(" + Colors.rgb[4] + ",0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            }
          },
          {
            name: '公开日数量', //虚线
            type: "line",
            data: dotted2,
            smooth: true,
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: Colors.color[4],
                lineStyle:{
                  type:'dotted'  //'dotted'虚线 'solid'实线
                }
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(" + Colors.rgb[4] + ",0.8)"
                    },
                    {
                      offset: 1,
                      color: "rgba(" + Colors.rgb[4] + ",0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            }
          }
        ],
      }
      this.chartTwo.setOption(optionOne)
      window.addEventListener("resize", () => {
        if(this.$route.query.active === 2){
          setTimeout(() => {
            this.chartTwo.resize()
          }, 400)
        }
      })
      // 防止多次绑定click事件
      this.chartTwo.off('click')
      this.chartTwo.on('click', (params) => {
        // return
        this.oneListName = params.name
        this.oneIpi = 0
        this.oneCurrentPage = 1

        let fieldType = ''
        if(params.seriesName.indexOf('申请日')>-1){
          fieldType = 'ad'
        }else if(params.seriesName.indexOf('公开日')>-1){
          fieldType = 'isd'
        }
        this.oneFieldType = fieldType
        this.queryOneList(this.oneListName, this.oneListName, fieldType)
      })
    },
    // picker查询专利申请趋势
    queryOne() {
      let startYear = new Date(this.chartOneStart).getFullYear()
      let endYear = new Date(this.chartOneEnd).getFullYear()
      this.fieldType = 'ad'
      this.getTrendsData(startYear, endYear)
    },
    // 查询右侧list表格
    queryOneList(startYear, endYear, fieldType) {
      if (startYear !== '' && endYear !== '') {
        this.$post(this.$Url.production.patentList, {
          ipi: this.oneIpi + 1,
          ips: this.oneIps,
          musts: {
            'in_id.id': this.id,
          },
          rangArr: [
            {
              field: fieldType, // ad:申请日 isd:公开日
              start: `${startYear}-01-01`,
              end: `${endYear}-12-31`
            }
          ]
        }).then(res => {
          let data = res.data
          if (data && data.result) {
            this.oneListData = data.result
            this.oneTotal = data.total || 0
          }
        }).catch(error => {
          console.log(error);
        })
      }
    },
    getOneCurrentPage(val) {
      this.oneIpi = Number(val) - 1
      let startYear = new Date(this.chartOneStart).getFullYear()
      let endYear = new Date(this.chartOneEnd).getFullYear()
      this.queryOneList(this.oneListName, this.oneListName, this.oneFieldType)
    },
    oneChartsDate: function(i) {
      let s = "",
        e = "";
      if (this["chart" + i + "Start"] != "") {
        s = new Date(this["chart" + i + "Start"]).getFullYear()
      }
      if (this["chart" + i + "End"] != "") {
        if (
          new Date(this["chart" + i + "End"]).getFullYear() > new Date().getFullYear()
        ) {
          this.$message({
            message: '年份不能大于当前年！',
            duration: 1500,
            center: true
          });
          this["chart" + i + "End"] = new Date();
          return
        }
        e = new Date(this["chart" + i + "End"]).getFullYear()
      }
      if (s != "" && e != "" && s >= e) {
        this.$message({
          message: '开始时间不能大于或等于结束时间！',
          duration: 1500,
          center: true
        });
        // this["chart" + i + "End"] = "";
        // this["chart" + i + "Start"] = "";
      }
      this["query" + i]();
    },
    headerCellStyle() {
      return {
        'font-weight': 'normal',
        'color': '#86899e',
        'background-color': '#f3f6f9'
      }
    },
    // 科研成果列表
    getTwoListData() {
      this.$post(this.$Url.production.patents_by_pid, {
        user: this.user,
        pid: this.$route.query.id// '9ab97150-fe5e-11ea-8cf4-5254004376bd', // this.$route.query.id
      }).then(res => {
        let data = res.data
        if (data) {
          this.twoListData = data
        }
      })
      // this.$post(this.$Url.production.patentList, {
      //   ipi: this.twoIpi + 1,
      //   ips: this.twoIps,
      //   musts: {
      //     'in_id.id': this.id,
      //   },
      // }).then(res => {
      //   this.twoListData = res.data.result
      //   this.twoTotal = res.data.total || 0
      // }).catch(err => {})
    },
    getTwoCurrentPage(val) {
      this.twoIpi = Number(val) - 1
      this.getTwoListData()
    },
    // 成果转化潜力
    getThreeListData() {
      this.$post(this.$Url.production.conversion, {
        aggs: {
          size: '10',
          field: 'ipc_kind',
          type: 'base',
        },
        musts: {
          'in_id.id': this.id
        },
        code: this.levelCode,
      }).then(res => {
        this.threeListData = res.data || []
      }).catch(err => {})
    },
    getThreeCurrentPage(val) {
      this.threeIpi = Number(val) - 1
      this.getThreeListData()
    },
    // 涉及专利关系图
    getChartThreeData() {
      // this.renderchartThree(jsonData)
    },
    renderchartThree(data) {
      let nodes = data.nodes
      nodes.forEach(node => {
        if (!node.style) {
          node.style = {}
        }
        node.style.background = {
          fill: 'steelblue',
          stroke: '#333',
          lineWidth: 1,
        }
        // 
        switch (
          node.class // 根据节点数据中的 class 属性配置图形
        ) {
          case 'c0': {
            node.type = 'circle'; // class = 'c0' 时节点图形为 circle
            break;
          }
          case 'c1': {
            node.type = 'rect'; // class = 'c1' 时节点图形为 rect
            node.size = [35, 20]; // class = 'c1' 时节点大小
            break;
          }
          case 'c2': {
            node.type = 'ellipse'; // class = 'c2' 时节点图形为 ellipse
            node.size = [35, 20]; // class = 'c2' 时节点大小
            break;
          }
        }
      })
      let edges = data.edges
      edges.forEach(edge => {
        if (!edge.style) {
          edge.style = {};
        }
        edge.style.lineWidth = edge.weight; // 边的粗细映射边数据中的 weight 属性数值
        edge.style.opacity = 0.1
        edge.style.stroke = 'red'
      })
      const graph = new this.$g6.Graph({
        container: 'chartThree',
        width: document.getElementById('chartThree').offsetWidth,
        height: document.getElementById('chartThree').offsetHeight,
        defaultNode: {
          size: 30,
          labelCfg: {
            style: {
              fill: '#fff'
            }
          }
        },
        defaultEdge: {
          labelCfg: {
            autoRotate: true,
            style: {
              color: 'red'
            }
          }
        },
        nodeStateStyles: {
          hover: {},
          select: {}
        },
        edgeStateStyles: {
          hover: {},
          select: {}
        },
        // fitView: true,
        // fitViewPadding: [20, 40, 50, 20],
        animate: true,
        modes: {
          default: ['drag-canvas', 'zoom-canvas'],
          edit: ['click-select']
        },
        layout: {
          type: 'force',

        }
      })
      graph.data(data)
      graph.render()
    },
    getTrackListData() {
      this.trackListData = [
        {
          time: '2002.02-2012.02',
          ins: '哈尔滨佛学院',
          ins2: '化学汽相沉积'
        },
        {
          time: '2012.02-2014.02',
          ins: '博众精工科技股份有限公司',
          ins2: '医学模拟或医疗数据挖掘的ICT'
        },
      ]
    },
    getTrackCurrentPage(val) {

    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.elcard {
  position: relative;
  margin-bottom: 20px;
  text-align: left;
  .card-box {
    display: flex;
    &:before {
      position: absolute;
      top: 20px;
      left: 65%;
      z-index: 2;
      width: 1px;
      height: calc(100% - 40px);
      content: '';
      background-color: #d9e0ee;
    }
    .left-box {
      flex: .65;
      .logo-box {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 120px;
        height: 120px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #d9e0ee;
        box-sizing: border-box;
      }
      .user-info {
        position: relative;
        min-height: 120px;
        padding-left: 140px;
        padding-right: 40px;
        text-align: left;
        h2 {
          line-height: 30px;
          margin-bottom: 10px;
          font-weight: bold;
          font-size: 18px;
          color: #4f515b;
          span {
            margin-left: 14px;
            font-size: 12px;
            vertical-align: text-top;
            color: #86899e;
          }
        }
        .info1 {
          position: relative;
          display: inline-flex;
          align-items: center;
          width: 100%;
          line-height: 24px;
          padding: 4px 0;
          font-size: 14px;
          span {
            flex: .5;
            color: #86899e;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            i {
              font-style: normal;
              color: #4f515b
            }
          }
        }
        .info2 {
          display: flex;
          width: 100%;
          line-height: 24px;
          padding: 4px 0;
          font-size: 14px;
          color: #86899e;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .tit {
            width: 70px;
          }
          .content {
            flex: 1;
            font-weight: bold;
            color: #504da5;
            white-space: normal;
            word-break: keep-all;
          }
        }
        .info3 {
          display: flex;
          width: 100%;
          line-height: 24px;
          padding: 4px 0;
          font-size: 14px;
          color: #86899e;
          .tit {
            width: 70px;
          }
          .content {
            flex: 1;
            line-height: 24px;
            font-weight: normal;
            color: #4f515b;
          }
        }
      }
    }
    .radar-box {
      position: relative;
      flex: .35;
      align-self: normal;
    }
  }
  .main-box {
    display: flex;
    .left-box {
      flex: .5;
      .tit {
        display: inline-block;
        width: 56px;
        text-align: left;
        font-size: 12px;
        color: #4f515b;
      }
      .elselect {
        width: 200px;
        background-color: #f3f5f8;
      }
      .eldatepicker {
        width: 120px;
      }
      .split {
        display: inline-block;
        padding: 0 5px;
      }
    }
    .right-box {
      flex: .5;
      .tit {
        margin-bottom: 20px;
        font-weight: bold;
        font-size: 14px;
        color: #504da5;
      }
    }
  }
}
.el-pagination {
  margin-top: 20px;
  text-align: center;
}
.percentage-box {
  display: flex;
  align-items: center;
  justify-content: center;
  .progress {
    flex: .4
  }
  .number {
    flex: .5;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.names {
  flex: 1;
  // font-size: 16px;
  font-weight: bold;  
  span {
    display: block;
    // width: 100%;
  }
}
.track-box {
  position: relative;
  display: flex;
}
.wrap {
  font-weight: bold;
  color: #504da6;
}
#chartThree {
  text-align: center;
}
.empty-txt {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  line-height: 30px;
  margin-top: -15px;
  text-align: center;
  font-size: 14px;
}
</style>